<template>
	<view class="container">
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate1Count"> <text class="diy-icon-starfill pointer" :data-index="item" :style="{ color: item <= rate1 ? '#07c160' : '#eee', fontSize: '24px' }" @tap="changeRate1" /> </template>
				<input type="hidden" hidden name="rate1" :value="rate1" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate2Count"> <text class="diy-icon-appreciatefill pointer" :data-index="item" :style="{ color: item <= rate2 ? '#07c160' : '#eee', fontSize: '24px' }" @tap="changeRate2" /> </template>
				<input type="hidden" hidden name="rate2" :value="rate2" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate3Count"> <text class="diy-icon-upstagefill pointer" :data-index="item" :style="{ color: item <= rate3 ? '#07c160' : '#eee', fontSize: '24px' }" @tap="changeRate3" /> </template>
				<input type="hidden" hidden name="rate3" :value="rate3" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate4Count"> <text class="diy-icon-sponsorfill pointer" :data-index="item" :style="{ color: item <= rate4 ? '#07c160' : '#eee', fontSize: '24px' }" @tap="changeRate4" /> </template>
				<input type="hidden" hidden name="rate4" :value="rate4" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate5Count"> <text class="diy-icon-selectionfill pointer" :data-index="item" :style="{ color: item <= rate5 ? '#07c160' : '#eee', fontSize: '24px' }" @tap="changeRate5" /> </template>
				<input type="hidden" hidden name="rate5" :value="rate5" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate6Count"> <text class="diy-icon-emojiflashfill pointer" :data-index="item" :style="{ color: item <= rate6 ? '#07c160' : '#eee', fontSize: '37px' }" @tap="changeRate6" /> </template>
				<input type="hidden" hidden name="rate6" :value="rate6" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate7Count"> <text class="diy-icon-emojiflashfill pointer" :data-index="item" :style="{ color: item <= rate7 ? 'rgba(247, 45, 5, 1)' : '#eee', fontSize: '37px' }" @tap="changeRate7" /> </template>
				<input type="hidden" hidden name="rate7" :value="rate7" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate8Count"> <text class="diy-icon-focus pointer" :data-index="item" :style="{ color: item <= rate8 ? 'rgba(247, 45, 5, 1)' : '#eee', fontSize: '37px' }" @tap="changeRate8" /> </template>
				<input type="hidden" hidden name="rate8" :value="rate8" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rate9Count"> <text class="diy-icon-friendfamous pointer" :data-index="item" :style="{ color: item <= rate9 ? 'rgba(1, 71, 169, 1)' : '#eee', fontSize: '37px' }" @tap="changeRate9" /> </template>
				<input type="hidden" hidden name="rate9" :value="rate9" />
			</view>
		</view>
		<view class="diygw-form-item diygw-col-24">
			<view class="title"> 标题 </view>
			<view class="input" style="overflow-x: initial">
				<template v-for="item in rateCount"> <text class="diy-icon-goodsfavor pointer" :data-index="item" :style="{ color: item <= rate ? 'rgba(4, 208, 69, 1)' : '#eee', fontSize: '37px' }" @tap="changeRate" /> </template>
				<input type="hidden" hidden name="rate" :value="rate" />
			</view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				rate1Count: 5,
				rate1: 3,
				rate2Count: 5,
				rate2: 3,
				rate3Count: 6,
				rate3: 3,
				rate4Count: 8,
				rate4: 3,
				rate5Count: 8,
				rate5: 4,
				rate6Count: 6,
				rate6: 3,
				rate7Count: 6,
				rate7: 3,
				rate8Count: 6,
				rate8: 4,
				rate9Count: 6,
				rate9: 3,
				rateCount: 6,
				rate: 3
			};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {},
			changeRate1(evt) {
				let rate1 = evt.currentTarget.dataset.index;
				if (this.rate1 == rate1) {
					rate1 = rate1 - 1;
				}
				this.setData({ rate1 });
			},
			changeRate2(evt) {
				let rate2 = evt.currentTarget.dataset.index;
				if (this.rate2 == rate2) {
					rate2 = rate2 - 1;
				}
				this.setData({ rate2 });
			},
			changeRate3(evt) {
				let rate3 = evt.currentTarget.dataset.index;
				if (this.rate3 == rate3) {
					rate3 = rate3 - 1;
				}
				this.setData({ rate3 });
			},
			changeRate4(evt) {
				let rate4 = evt.currentTarget.dataset.index;
				if (this.rate4 == rate4) {
					rate4 = rate4 - 1;
				}
				this.setData({ rate4 });
			},
			changeRate5(evt) {
				let rate5 = evt.currentTarget.dataset.index;
				if (this.rate5 == rate5) {
					rate5 = rate5 - 1;
				}
				this.setData({ rate5 });
			},
			changeRate6(evt) {
				let rate6 = evt.currentTarget.dataset.index;
				if (this.rate6 == rate6) {
					rate6 = rate6 - 1;
				}
				this.setData({ rate6 });
			},
			changeRate7(evt) {
				let rate7 = evt.currentTarget.dataset.index;
				if (this.rate7 == rate7) {
					rate7 = rate7 - 1;
				}
				this.setData({ rate7 });
			},
			changeRate8(evt) {
				let rate8 = evt.currentTarget.dataset.index;
				if (this.rate8 == rate8) {
					rate8 = rate8 - 1;
				}
				this.setData({ rate8 });
			},
			changeRate9(evt) {
				let rate9 = evt.currentTarget.dataset.index;
				if (this.rate9 == rate9) {
					rate9 = rate9 - 1;
				}
				this.setData({ rate9 });
			},
			changeRate(evt) {
				let rate = evt.currentTarget.dataset.index;
				if (this.rate == rate) {
					rate = rate - 1;
				}
				this.setData({ rate });
			}
		}
	};
</script>

<style lang="scss"></style>
